/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="add-filter-form">
        <sf-form ref="form"
                 :label-width="100">
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>字段名称</lang>
                </sf-fieldlabel>
                <sf-select v-model="submitData.name"
                           :default-width="fieldWidth"
                           :allow-blank="false"
                           :allow-search="true"
                           :placeholder="_('字段名称')"
                           :options="fieldList" />
            </sf-form-item>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>操作符</lang>
                </sf-fieldlabel>
                <sf-select v-model="submitData.opr"
                           :default-width="fieldWidth"
                           :allow-blank="false"
                           :placeholder="_('操作符')"
                           :options="oprList" />
            </sf-form-item>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>字段值</lang>
                </sf-fieldlabel>
                <sf-textfield
                    ref="fieldName"
                    v-model="submitData.value"
                    :default-width="fieldWidth"
                    :max-length="30"
                    :allow-blank="false"
                    :utf8-length="false"
                    :blur-trim="true"
                    :placeholder="_('字段值')" />
            </sf-form-item>
        </sf-form>
        <div class="submit-collect">
            <sf-button-primary @click.native="submit">
                确认
            </sf-button-primary>
            <sf-button @click.native="cancel">
                取消
            </sf-button>
        </div>
    </div>
</template>
    
    <style lang="less">
    .add-filter-form{
        .sfv-form{
            padding: 12px;
             padding-bottom: 8px;
        }
    }
    .sfv-layer-close {
        right: 12px;
        top: 12px;
    }
    .sfv-layer-close:before {
        color: #495060;
    }
    .submit-collect {
        border-top: 1px solid #ddd;
        padding: 8px;
        overflow: hidden;
        width: 100%;
        bottom: 0;
        background-color: #fdfdfd;
        border-radius: 0 0 2px 2px;
        text-align: right;
    }
    </style>
    
<script lang=ts>

import { Component, Vue, Ref } from 'vue-property-decorator';
import { SfForm } from '@sxf/sf-vue-component';
    
const FIELD_WIDTH = 150;
const DEFAULT_VALUE = {
    name: '',
    opr: '',
    value: ''
};
    
@Component
export default  class AddFilterForm extends Vue {
    @Ref() form!: SfForm

    submitData = Object.assign({}, DEFAULT_VALUE)
    isExist = false
    // TODO: REMOVE ANY
    fieldList: string[] = []
    // TODO: REMOVE ANY
    oprList: string[] = []

    get fieldWidth () {
        return FIELD_WIDTH;
    }

    setJsonValue (data: typeof DEFAULT_VALUE) {
        Object.assign(this.submitData, data);

        this.$nextTick(() => {
            this.form.clearInvalid();
        });
    }

    getJsonValue () {
        return this.submitData;
    }

    submit () {
        this.$emit('filter-submit', this.submitData);
    }

    cancel () {
        this.$emit('filter-cancel');
    }

    clearInvalid () {
        this.$nextTick(() => {
            this.form.clearInvalid();
        });
    }
};
    
</script>
    